<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram Fig. 3.37</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            background-color: #ffffff;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="600" height="420"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        const FONT_SIZE = 22;
        const SUB_FONT_SIZE = 16;
        const FONT_FAMILY = '"Comic Sans MS", cursive, sans-serif';

        /**
         * Draws a zig-zag line for resistors or windings.
         * @param {number} x - The starting x-coordinate.
         * @param {number} y - The starting y-coordinate.
         * @param {number} length - The total length of the component.
         * @param {number} zigs - The number of "peaks" in the zig-zag.
         * @param {boolean} isVertical - True for vertical orientation, false for horizontal.
         */
        function drawZigzag(x, y, length, zigs, isVertical) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            const zagSize = 8; // The amplitude of the zig-zag
            const segLength = length / zigs;

            if (isVertical) {
                for (let i = 1; i <= zigs; i++) {
                    ctx.lineTo(x + zagSize * (i % 2 === 1 ? -1 : 1), y + i * segLength - segLength / 2);
                }
                ctx.lineTo(x, y + length);
            } else { // Horizontal
                for (let i = 1; i <= zigs; i++) {
                    ctx.lineTo(x + i * segLength - segLength / 2, y + zagSize * (i % 2 === 1 ? -1 : 1));
                }
                ctx.lineTo(x + length, y);
            }
            ctx.stroke();
        }
        
        // --- Define Coordinates ---
        const yTop = 150;
        const yBottom = 250;
        const xCap = 100;
        const xResPStart = 150;
        const xResPEnd = 250;
        const xIndP = 300;
        const xCore1 = 325;
        const xCore2 = 335;
        const xIndS = 360;
        const xResS = 460;

        // --- Draw Primary Circuit (Left) ---

        // Capacitor and its labels
        ctx.beginPath();
        ctx.moveTo(xCap, yTop); ctx.lineTo(xCap, 185);
        ctx.moveTo(xCap, 215); ctx.lineTo(xCap, yBottom);
        ctx.moveTo(xCap - 20, 185); ctx.lineTo(xCap + 20, 185);
        ctx.moveTo(xCap - 20, 215); ctx.lineTo(xCap + 20, 215);
        ctx.stroke();
        
        ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('V', xCap - 30, 185);
        ctx.textAlign = 'left';
        ctx.fillText('C', xCap + 30, 200);

        // Resistor Rp and its label
        drawZigzag(xResPStart, yTop, xResPEnd - xResPStart, 6, false);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('R', (xResPStart + xResPEnd) / 2, yTop - 15);
        ctx.font = `${SUB_FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('p', (xResPStart + xResPEnd) / 2 + 12, yTop - 13);

        // Primary Winding Np and its label
        drawZigzag(xIndP, yTop, yBottom - yTop, 7, true);
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('N', xIndP - 20, yTop + 50);
        ctx.font = `${SUB_FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.textAlign = 'left';
        ctx.fillText('p', xIndP - 18, yTop + 58);

        // Switch
        const switchX1 = 170;
        const switchX2 = 250;
        ctx.beginPath();
        ctx.moveTo(switchX1, yBottom);
        ctx.lineTo(switchX2 - 25, yBottom - 15);
        ctx.stroke();

        // Primary circuit wires
        ctx.beginPath();
        ctx.moveTo(xCap, yTop); ctx.lineTo(xResPStart, yTop);
        ctx.moveTo(xResPEnd, yTop); ctx.lineTo(xIndP, yTop);
        ctx.moveTo(xIndP, yBottom); ctx.lineTo(switchX2, yBottom);
        ctx.moveTo(switchX1, yBottom); ctx.lineTo(xCap, yBottom);
        ctx.stroke();

        // --- Draw Transformer Core ---
        ctx.beginPath();
        ctx.moveTo(xCore1, yTop - 10); ctx.lineTo(xCore1, yBottom + 10);
        ctx.moveTo(xCore2, yTop - 10); ctx.lineTo(xCore2, yBottom + 10);
        ctx.stroke();

        // --- Draw Secondary Circuit (Right) ---

        // Secondary Winding Ns and its label
        drawZigzag(xIndS, yTop, yBottom - yTop, 7, true);
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('N', xIndS + 20, yTop + 50);
        ctx.font = `${SUB_FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('s', xIndS + 35, yTop + 58);

        // Resistor Rs and its label
        drawZigzag(xResS, yTop, yBottom - yTop, 7, true);
        ctx.font = `${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('R', xResS + 20, yTop + 50);
        ctx.font = `${SUB_FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.fillText('s', xResS + 35, yTop + 58);

        // Secondary circuit wires
        ctx.beginPath();
        ctx.moveTo(xIndS, yTop); ctx.lineTo(xResS, yTop);
        ctx.moveTo(xIndS, yBottom); ctx.lineTo(xResS, yBottom);
        ctx.stroke();
        
        // --- Draw Figure Caption ---
        ctx.font = `bold ${FONT_SIZE}px ${FONT_FAMILY}`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('Fig. 3.37', canvas.width / 2, canvas.height - 20);
    </script>
</body>
</html>